<!--
 * 表单组件
-->
<template>
	<page-layout class="page-layout">
		<!-- 基础使用 -->
		<app-demo-module title="基础使用">
			<pure-form
				class="form"
				:model="form"
				:rules="rules"
				ref="formRef"
				labelWidth="3em"
			>
				<!-- 字符串 姓名 Input -->
				<pure-form-item class="form-item" prop="name" label="姓名">
					<pure-input
						v-model="form.name"
						placeholder="请输入您的姓名"
						clearable
					></pure-input>
				</pure-form-item>

				<!-- 数字 年龄 Input -->
				<pure-form-item class="form-item" prop="age" label="年龄">
					<pure-input
						v-model="form.age"
						placeholder="请输入您的年龄"
						type="number"
						clearable
					></pure-input>
				</pure-form-item>

				<!-- 字符串 备注 Textarea -->
				<pure-form-item
					class="form-item"
					prop="remark"
					label="备注"
					labelPosition="start"
				>
					<pure-textarea
						v-model="form.remark"
						placeholder="请输入备注~"
						clearable
					></pure-textarea>
				</pure-form-item>

				<!-- 单选 性别 RadioGroup & Radio -->
				<pure-form-item class="form-item" prop="sex" label="性别">
					<pure-radio-group v-model="form.sex">
						<pure-radio label="男生" value="1"></pure-radio>
						<pure-radio label="女生" value="0"></pure-radio>
					</pure-radio-group>
				</pure-form-item>

				<!-- 多选 爱好 CheckboxGroup & Group -->
				<pure-form-item class="form-item" prop="like" label="爱好">
					<pure-checkbox-group v-model="form.like">
						<pure-checkbox label="打篮球" value="1"></pure-checkbox>
						<pure-checkbox label="踢足球" value="2"></pure-checkbox>
						<pure-checkbox label="跑步" value="3"></pure-checkbox>
						<pure-checkbox label="看电影" value="4"></pure-checkbox>
						<pure-checkbox label="听音乐" value="5"></pure-checkbox>
						<pure-checkbox label="读书" value="6"></pure-checkbox>
					</pure-checkbox-group>
				</pure-form-item>

				<!-- 开关选择器 承诺 Switch -->
				<pure-form-item class="form-item" prop="real" label="承诺">
					<pure-switch v-model="form.real"></pure-switch>
				</pure-form-item>

				<!-- 步进器 幸运数字 Stepper -->
				<pure-form-item class="form-item" prop="lucky" label="数字">
					<pure-stepper
						v-model="form.lucky"
						:min="1"
						:max="100"
						placeholder="幸运数"
						placeholder-style="font-size: 12px"
					></pure-stepper>
				</pure-form-item>
			</pure-form>

			<pure-gap size="30px"></pure-gap>
			<pure-button
				text="提交"
				block
				theme="primary"
				@tap="handleSubmit"
			></pure-button>
			<pure-gap></pure-gap>
			<pure-button
				text="重置"
				block
				theme="danger"
				@tap="handleReset"
			></pure-button>
		</app-demo-module>
	</page-layout>
</template>

<script setup>
import { ref, computed } from "vue";

// 表单组件ref
const formRef = ref(null);

// 表单数据
const form = ref({
	name: "",
	age: null,
	remark: "",
	sex: "",
	like: [],
	real: false,
	lucky: null,
});

// 表单验证规则
const rules = ref({
	name: [
		{
			required: true,
			message: "请填写您的姓名",
			trigger: ["blur", "change"],
		},
		{
			max: 3,
			message: "姓名长度不能超过5个字符",
			trigger: ["blur", "change"],
		},
	],
	age: [
		{
			required: true,
			min: 18,
			message: "您必须年满18岁才可注册",
			trigger: ["blur", "change"],
			type: "number",
		},
		{
			required: true,
			max: 60,
			message: "年龄不能超过60",
			trigger: ["blur", "change"],
			type: "number",
		},
	],
	remark: [
		{
			required: true,
			message: "请填写备注",
			trigger: ["blur", "change"],
		},
	],
	sex: [
		{
			required: true,
			message: "请选择性别",
			trigger: ["blur", "change"],
		},
	],
	like: [
		{
			required: true,
			type: "array",
			message: "至少选择一项爱好",
			trigger: ["blur", "change"],
		},
	],
	real: {
		required: true,
		type: "boolean",
		message: "需承诺您的信息真实有效",
		trigger: ["blur", "change"],
		validator: (rule, value, callback) => {
			if (!value) {
				callback(new Error("需承诺您的信息真实有效"));
				return;
			}
			callback();
		},
	},
	lucky: {
		required: true,
		type: "number",
		message: "请输入1-100之间的幸运数字",
		trigger: ["blur", "change"],
		min: 1,
		max: 100,
	},
});

// 提交
function handleSubmit() {
	console.log(form.value);
	formRef.value
		?.validate?.()
		.then(() => {
			console.log("表单验证通过");
		})
		.catch(() => {
			console.log("表单验证未通过");
		});
}

// 重置
function handleReset() {
	formRef.value?.reset?.();
}
</script>

<style scoped lang="scss">
.form {
	background: #f8f8f8;
	padding: 12px 15px 20px;
	border-radius: 5px;
}
</style>
